﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
	    #box{
	    	width: 250px;
	    	height: 260px;
	    	position: relative;
	    	left: 50%;
	    	top: 10%;
	    	margin-top:50px;
	    	margin-left:-125px;
	    }
        ul{ 
            width: 250px;
            border: 3px #ccc solid;
            padding: 5px;
            margin: 0;
        }
        li{ 
            list-style: none;
            height: 30px;
            line-height: 30px;
            width: 250px;
            background: #ccc;
            font-size: 12px;
        }
        li span{
            position: absolute;
            text-align:right;
            left:190px;
        }
        #btm{ 
            width: 250px;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            text-align: center;
        }
        #btm input{ margin: 7px;}
    </style>
    <!--<script src="index.js"></script>-->
    <script type="text/javascript">
        window.onload = function() {
    var oBtn = document.getElementsByTagName("button")[0];
    var oBtn1 = document.getElementsByTagName("button")[1];
    var oSelect = document.getElementById("select");
    var aLi = oSelect.getElementsByTagName("li");
    var aInput = oSelect.getElementsByTagName("input");
    var oAllselect = document.getElementById("allselect");
    var oFavorite = document.getElementById("favorite");
    var oAdd = document.getElementById("add");
    var oRemove = document.getElementById("remove");

    function start(i) {
        if (i % 2 == 0) {
            aLi[i].style.background = "#eee"
        } else {
            aLi[i].style.background = "#fff"
        }
    }
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        start(i);
        aLi[i].onmouseover = function() {
            for (var i = 0; i < aLi.length; i++) {
                if (aInput[i].checked == true) {
                    this.style.background = "aqua"
                } else {
                    this.style.background = "aqua";
                    oAllselect.checked = false
                }
            }
        };
        aLi[i].onmouseout = function() {
            if (aInput[this.index].checked == true) {
                this.style.background = "aqua"
            } else {
                if (this.index % 2 == 0) {
                    this.style.background = "#eee"
                } else {
                    this.style.background = "#fff"
                }
            }
        };
        aInput[i].onclick = function() {
            if (this.checked == true) {
                show(false);
                for (var i = 0; i < aInput.length; i++) {
                    if (aInput[i].checked == true) {
                        oAllselect.checked = true
                    } else {
                        oAllselect.checked = false;
                        break
                    }
                }
            } else {
                for (var i = 0; i < aInput.length; i++) {
                    if (aInput[i].checked == false) {
                        show(true)
                    } else {
                        show(false);
                        break
                    }
                }
                oAllselect.checked = false
            }
        }
    }
    oAllselect.onclick = function() {
        if (this.checked == true) {
            for (var i = 0; i < aLi.length; i++) {
                aInput[i].checked = true;
                aLi[i].style.background = "aqua";
                show(false)
            }
        } else {
            show(true);
            for (var i = 0; i < aLi.length; i++) {
                aInput[i].checked = false;
                for (var j = 0; j < aLi.length; j++) {
                    start(j)
                }
            }
        }
    };

    function show(a) {
        oFavorite.disabled = a;
        oAdd.disabled = a;
        oRemove.disabled = a
    }
    var m = 0;
    oBtn.onclick = function() {
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].checked = !aInput[i].checked;
            if (aInput[i].checked == false) {
                m++;
                oAllselect.checked = false;
                if (i % 2 == 0) {
                    aLi[i].style.background = "#eee"
                } else {
                    aLi[i].style.background = "#fff"
                }
            } else {
                m--;
                if (m <= 0) {
                    m = 0;
                    oAllselect.checked = true
                }
                aLi[i].style.background = "aqua";
                show(false)
            }
        }
        if (m == aInput.length) {
            show(true)
        }
    };
    oBtn1.onclick = function() {
        m = 0;
        oAllselect.checked = false;
        for (var i = 0; i < aInput.length; i++) {
            aInput[i].checked = false;
            show(true);
            if (aInput[i].checked == false) {
                if (i % 2 == 0) {
                    aLi[i].style.background = "#eee"
                } else {
                    aLi[i].style.background = "#fff"
                }
            } else {
                aLi[i].style.background = "aqua"
            }
        }
    }
};
    </script>
</head>
<body>
    <div id="box">
    	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	<button>反选</button>&nbsp;<button>清空</button><br /><br />
        <ul id="select">
            <li><input type="checkbox">私奔 <span>梁博</span></li>
            <li><input type="checkbox">北京 <span>梁博·黄勇</span></li>
            <li><input type="checkbox">我爱你中国 <span>梁博</span></li>
            <li><input type="checkbox">花火 <span>梁博</span></li>
            <li><input type="checkbox">回来 <span>梁博</span></li>
            <li><input type="checkbox">爱要有你才完美 <span>梁博·那英</span></li>
        </ul>
        <div id="btm">
          <input type="checkbox" id="allselect">全选  <input type="button" value="收藏" id="favorite" disabled >
          <input type="button" value="添加" id="add" disabled> <input type="button" value="删除" id="remove" disabled>
        </div>
    </div>
</body>
</html>